import '../../styles.css'

import styles from './index.module.css'
import avatar from '../../../public/avatar.png'
import Image from "next/image";
import {ChangeEvent, useEffect, useState} from "react";
import {queryUserInfo, submitFeedback} from "@/service/api";
import Cookies from "js-cookie";
import {COOKIE_KEY, getDomain, LOGIN_KEY} from "@/utils";
import { useRouter } from 'next/router';

export default function My() {
    const router = useRouter();

    const [feedback, setFeedback] = useState(''); // 这里使用 string 来简化示例，你可以定义一个更精确的类型
    const [userInfo, setUserInfo] = useState<any>({}); // 这里使用 any 来简化示例，你可以定义一个更精确的类型

    useEffect(() => {
        queryUserInfo().then(res => {
            console.log('user info', res)
            if (res.code === 1) {
                setUserInfo(res.data)
            } else {
                alert('获取用户信息失败,' + res.msg)
            }
        })
    }, []);

    function feedbackChangeEvent(event: ChangeEvent<HTMLTextAreaElement>) {
        setFeedback(event.target.value)
    }

    function handleSubmit() {
        if (!feedback) {
            alert('请填写您的意见反馈')
            return
        }
        console.log(feedback)
        submitFeedback({content: feedback}).then(res => {
            if (res.code === 1) {
                alert('提交成功')
                setFeedback('')
            } else {
                alert('提交失败,' + res.msg)
            }
        })
    }
    function jumpToWechatForAuth() {
        const query = router.query
        console.log('query from login page', query)

        let redirect_uri = getDomain() + '/login_redirect'
        if (query.returnUrl) {
            redirect_uri += '?returnUrl=' + encodeURIComponent(query.returnUrl as string)
        }
        console.log('redirect_uri', redirect_uri)
        const url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx4e6e1779868bc0be&redirect_uri=' + encodeURIComponent(redirect_uri) + '&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect'
        console.log('url', url)
        window.location.reload()
    }
    return (
        <>
            <div className={styles.my}>
                <div className={styles.header}>
                    {userInfo ? (
                        <>
                            <Image className={styles.header_avatar} src={userInfo.avatarUrl} alt={'头像'}/>
                            <div className={styles.header_info}>
                                <div className={styles.header_name}>{userInfo.nickname}</div>
                                {/*<div className={styles.header_id}>ID: 123456</div>*/}
                            </div>
                        </>
                    ) : null}
                </div>
                <div className={styles.my_quiz} onClick={() => window.location.href = '/quiz_list'}>
                    <Image className={styles.quiz_icon} src={avatar} alt={'我的答题'}/>
                    <div className={styles.quiz_title}>
                        我的答题
                    </div>
                    <div className={styles.quiz_nav}></div>
                </div>
                <div className={styles.feedback}>
                    <div className={styles.feedback_title}>
                        意见反馈
                    </div>
                    <textarea className={styles.feedback_content} value={feedback} onChange={feedbackChangeEvent}
                              placeholder={'请填写您的意见反馈'}></textarea>
                    <button className={styles.feedback_submit} onClick={handleSubmit}>提&nbsp;&nbsp;交</button>
                </div>
                <button onClick={() => {
                    window.localStorage.removeItem(LOGIN_KEY)
                    Cookies.remove(COOKIE_KEY)

                    jumpToWechatForAuth()
                }} className={styles.logout}>退出登录</button>
            </div>
        </>
    )
}
